<template>
  <div class="category">
    <nav-bar>
      <div slot="center">购物街</div>
    </nav-bar>

    <h2>分类</h2>
    <ul>
      <li>{{ testObj.title }}</li>
      <li>{{ testObj.category }}</li>
    </ul>

    <button @click="testFun">按钮</button>
    <!-- <div class="wrapper" ref="wrapperRef">
      <div content></div>
    </div> -->

    <!-- <better-scroll></better-scroll> -->
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
// import BetterScroll from "better-scroll";

export default {
  components: {
    NavBar,
    // BetterScroll,
  },
  name: "Category",
  data() {
    return {
      scroll: null,
      scrollPostion: null,
      testObj:{
        title: "标题",
        category: "分类",
        category_id: "",
        category_name: "",
      }
    };
  },
  methods: {
    divClick() {
      console.log("点击发生了");
    },
    testFun(){
      this.testObj.category="细类"
    }
  },
  mounted() {
    // const wrapper = document.querySelector(".wrapper");
    // const wrapper = this.$refs.wrapperRef;
    // this.scroll = new BetterScroll(wrapper, {
    //   //   0-1：不打印滚动位置，2：打印位置，但不打印惯性滑动的滚动位置，3：打印手指离开后的惯性滚动位置
    //   probeType: 3,
    //   click: true,
    //   pullUpLoad: true,
    //   // pullUpLoad: {
    //   //     // 可以配置顶部下拉的距离（threshold）决定刷新时机
    //   //   threshold: -20,
    //   // },
    // });
    // this.scroll.on("scroll", (position) => {
    //   this.scrollPostion = position;
    //   // console.log(position);
    // });
    // this.scroll.on("pullingUp", () => {
    //   console.log("上拉加载更多");
    //   // 发送网络请求，请求更多的数据
    //   // await fetchData

    //   // 等数据请求完成，并且新的数据展示完成后，刷新pullup使下次pullup可以生效
    //   setTimeout(() => {
    //     this.scroll.finishPullUp(); // 该函数一调用就可以立即触发下一次，所以可以搞个延时setTimeout
    //   }, 1000);
    // });
  },
};
</script>

<style scoped>
.wrapper {
  /* height: calc(100%-98px); */
  height: 400px;
  /* background-color: aquamarine; */
  overflow: hidden;
}
.category >>> .nav-bar .center {
  background-color: rgb(255 228 209);
}
.category /deep/ .nav-bar .center {
  color:#c5518c
}
</style>
